<template>
  <el-dialog
    title="选择活动名称"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="80%"
  >
    <div class="person_content">
      <div class="group">
        <div class="mailList">
          <h3>活动视图</h3>
          <div class="group_con">
            <div class="title">
              <span
                v-for="(item, index) in headList"
                :key="index"
                @click="searchBeforLive(item.actId, index)"
              >
                {{ item.actName }}
                <span>></span>
              </span>
            </div>
            <div class="searchInput">
              <el-input
                v-model="searchStr"
                placeholder="请输入活动名称"
                size="mini"
                style="width: 60%"
              ></el-input>
              <el-button type="primary" size="mini" @click="searchStaff()"
                >搜索</el-button
              >
              <el-button type="primary" size="mini" @click="RefreshList()"
                >返回首级目录</el-button
              >
            </div>
            <div v-loading="loading" class="staff_con">
              <el-checkbox v-model="isAllCampaign" @change="checkedAll" /> <span class="more_span">所有活动</span>
              <!-- <el-tree
                :data="storeTreeList"
                show-checkbox
                node-key="actId"
                :default-expanded-keys="[1,3]"
                ref="storeTreeList"
                :props="defaultProps"
                @check="currentChecked"
                @node-click="handleNodeClick"
                
              >
              </el-tree> -->
              <ul>
                <li
                  v-for="(item1, index) in storeTreeList"
                  :key="'info' + index"
                >
                  <p
                    style="padding-left: 10px"
                    @click="watchGroup(item1.actId, item1.actName, item1.level)"
                  >
                    <i class="el-icon-arrow-down"></i>
                    <!-- <el-checkbox v-model="checked"  />  -->
                    {{ item1.actName }}
                  </p>
                </li>
                <!-- 人list  -->
                <ul class="person_list">
                  <li
                    v-for="(item2, index) in storeSecongTreeList"
                    :key="'info2-' + index"
                    @click="
                      handleCheckedCitiesChange(
                        item2.actId,
                        item2.actName,
                        item2.cityCode,
                        item2.cityName,
                        item2.level,
                        item2.pid
                      )
                    "
                  >
                    <el-tooltip class="item" placement="bottom">
                      <div slot="content">
                        名称：{{ item2.actName }}
                        <!-- <br /><br /> -->
                        <!-- 城市：{{item2.cityName}}<br /><br /> -->
                      </div>
                      <div>
                        <span class="list_con">{{ item2.actName }}</span>
                        <!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -->
                          <!-- <span style="font-size: 12px;color: #999;">{{item2.cityName}}</span> -->
                        <!-- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px;color: #999;">{{toplicText(item2)}}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px;color: #999;">{{item2.orgName}}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px;color: #999;">{{item2.staffAccount}}</span>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          <span style="font-size: 12px;color: #999;">{{item2.staffPosition ? item2.staffPosition : ''}}</span> -->
                      </div>
                    </el-tooltip>
                  </li>
                </ul>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="personnel">
        <h3>已选活动</h3>
        <div class="person_box">
          <el-tag
            v-for="(tag, index) in upperStory"
            :key="index"
            closable
            @close="handleClose(index)"
          >
            <el-tooltip class="item" effect="dark" placement="bottom">
              <div slot="content">
                城市编号：{{ tag.cityCode }}<br /><br />
                城市名称：{{ tag.cityName }}<br /><br />
                <!-- ssCode：{{ tag.ssCode }}<br /><br /> -->
                门店名称：{{ tag.actName }}
              </div>
              <el-button class="button">{{ tag.actName }}</el-button>
            </el-tooltip>
          </el-tag>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="submit()" size="mini">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      inputVal: "",
      groupVal: "",
      staffList: [], // 通讯录一级
      storeTreeList: [], //门店名称树结构数据(一级)
      storeSecongTreeList: [], //门店名称树结构数据(二级)
      searchStr:"",
      isAllCampaign:false,//控制所有活动
      checked: false, //checkbox的值
      personList: [], // 最后到人的list
      upperStory: [],
      staffIds: [], // 发送人数组id
      headList: [], // 头部返回上一层
      loading: false,
      deleteIdList: [], // 批量删除数组
      staffNameOrId: "", // 搜索id,
      //树结构方法
      // defaultProps: {
      //   children: "children",
      //   label: "actName",
      // },
    };
  },
  activated() {},
  methods: {
    //全选
    checkedAll() {
      // this.isAllCampaign = true
      if(this.isAllCampaign){
        let obj = {}
        obj.actName = "所有活动";
        this.upperStory.push(obj);
        if(this.upperStory[0].actName!=="所有活动"){
          this.upperStory = []
          obj.actName = "所有活动";
        this.upperStory.push(obj);
        }
      }else{
        this.upperStory = []
      }
    },
    // 初始
    init(id,copeTreeHuongDongData, val) {
      console.log(val);
      console.log(copeTreeHuongDongData,"copeTreeHuongDongData");
      this.dialogVisible = true;
      //   this.fetchStaffList();
      this.getStoreTree();
      this.headList = [];
      this.personList = [];
      this.staffNameOrId = "";
      this.searchStr =''
      this.storeTreeList = []
      this.storeSecongTreeList = []
      this.upperStory = [];
      this.isAllCampaign = false
      //重新判断了this.upperStory的值
      if (id && copeTreeHuongDongData.length != 0 && val == 0){
        this.upperStory = copeTreeHuongDongData
      } 
      if (id && val == 1){
        this.isAllCampaign = true
        this.checkedAll()
      }
    },
    //活动名称树结构(一级)
    getStoreTree() {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl(`cpcpactivity/getActTypeByLevel`),
        method: "get",
        params: this.$http.adornParams({
          level: 1,
        }),
      }).then(({ data }) => {
        console.log(data, "datatree");
        if (data.code === 0) {
          this.storeTreeList = data.data;
          this.loading = false;
        }
      });
    },
    //活动名称树结构(二级)
    getSecondStoreTree(actId) {
      this.loading = true;
      this.$http({
        url: this.$http.adornUrl(`cpcpactivity/getActTypeByLevel`),
        method: "get",
        params: this.$http.adornParams({
          level: 2,
          pId: actId,
        }),
      }).then(({ data }) => {
        console.log(data, "datatree");
        if (data.code === 0) {
          this.storeSecongTreeList = data.data;
          this.storeTreeList = [];
          this.loading = false;
        }
      });
    },
    // 查看下面分组通讯录
    watchGroup(actId, actName, level) {
      console.log("actId=", actId);
      console.log("actName=", actName);
      console.log("level=", level);
      let obj = {};
      obj.actName = actName;
      obj.level = level;
      obj.actId = actId;
      this.headList.push(obj);
      this.getSecondStoreTree(actId);
    },
    // 选择人
    handleCheckedCitiesChange(actId, actName, cityCode, cityName, level, pid) {
      let obj = {};
      let flag = 0;
      //     if (item.children.length === 0) {
      //       // console.log(item,"item");
      //       if(this.upperStory.length < 4){
      //         this.upperStory.push(item);
      //       }else{
      //         this.$message({
      //           message: "可最多复选4个活动,请重新选择",
      //           type: "warning",
      //         });
      //         return
      //       }
      if(this.isAllCampaign===true){
              this.$message({
              message: "您已选择所有活动，不能再进行选择",
              type: "warning",
            });
            flag = 1;
            return false;
      }
      if (this.upperStory.length < 4) {
        if(this.isAllCampaign===true){
          this.upperStory = []
        }
        this.upperStory.map((item) => {
          if (item.actId === actId) {
            this.$message({
              message: "您已选择过该成员",
              type: "warning",
            });
            flag = 1;
            return false;
          }
        });
        if (flag === 0) {
          obj.actId = actId;
          obj.actName = actName;
          obj.cityCode = cityCode;
          obj.cityName = cityName;
          obj.level = level;
          obj.pid = pid;
          this.upperStory.push(obj);
        }
      } else {
        this.$message({
          message: "可最多复选4个活动,请重新选择",
          type: "warning",
        });
        return;
      }
      console.log(this.upperStory, "upperStory");
    },
    // 人员提示文字
    toplicText(item) {
      let company = item.orgFullName;
      let orgName = item.orgName;
      if (company) {
        if (company.indexOf("中国电信股份有限公司") === 0) {
          company = company.substring(10, company.length);
        }
        let strLength = company.length - orgName.length;
        company = company.substring(0, strLength);
        return company;
      } else {
        return null;
      }
    },
    // 删除人员标签
    handleClose(index) {
      this.upperStory.splice(index, 1);
      if(this.isAllCampaign=== true){
        this.isAllCampaign = false
      }
    },
    // 搜索人员
    searchStaff() {
      this.$http({
        url: this.$http.adornUrl(`cpcpactivity/getActTypeByLevel`),
        method: "get",
        params: this.$http.adornParams({
          level: 2,
          searchStr: this.searchStr,
        }),
      }).then(({ data }) => {
        console.log(data);
        if (data.code === 0) {
         this.storeSecongTreeList = data.data;
          this.storeTreeList = [];
          if (data.data.length === 0) {
            this.$message({
              message: "暂无搜索结果！",
              type: "warning",
            });
          }
        }
      });
    },
    // 查询上一层
    searchBeforLive(actId, index) {
      this.storeSecongTreeList = [];
      console.log(actId, index);
      // if (actId) {
        // this.getSecondStoreTree(actId);
      // } else {
        this.getStoreTree();
      // }
      this.headList.splice(index);
    },
    // 点击刷新
    RefreshList() {
      //   this.fetchStaffList();
      this.getStoreTree();
      this.personList = [];
      this.headList = [];
      this.staffNameOrId = "";
      this.storeTreeList = []
      this.storeSecongTreeList = []
      this.searchStr = ""
    },
    // 确定
    submit() {
      this.dialogVisible = false;
      this.$emit("fetchPersonId", this.upperStory, this.isAllCampaign);
    },
  },
};
</script>

<style scoped>
.button{
  color: #fff;
}
.el-dialog__body {
  padding: 0 20px;
}
.person_content {
  display: flex;
}
.el-tag {
  height: 30px;
}
.el-tag button {
  background: transparent;
  border: 0;
}
.group {
  width: 60%;
}
.group div {
  width: 100%;
  box-sizing: border-box;
}
.group div h3 {
  width: 100%;
  text-align: center;
}
.staff_con {
  width: 100% !important;
  height: 460px;
  overflow-y: auto;
}
.group_con {
  width: 50%;
  height: 600px;
  padding: 10px;
  border: 1px solid #dedede;
}
.group_con ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.group_con li {
  cursor: pointer;
}
.group_con p:hover {
  background: #3e8ef7;
  color: #fff;
}
.personnel {
  margin: 0 20px;
  width: 40%;
}
.personnel h3 {
  text-align: center;
}
.input {
  width: 83% !important;
}
.el-checkbox-group {
  padding-left: 40px !important;
}
.title {
  line-height: 40px;
  font-weight: bold;
  font-size: 20px;
  min-height: 0;
}
.searchInput {
  margin: 10px 0;
}
.title > span {
  cursor: pointer;
}
.title > span:last-child span {
  display: none;
}
.person_box {
  border: 1px solid #dedede;
  display: inline-block;
  width: 100%;
  height: 600px;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 10px;
}
.person_box > span {
  margin: 2px 6px;
}
.group_li {
  padding: 0 !important;
  line-height: 30px;
  height: 546px;
  overflow-y: scroll;
}
.group_li li {
  padding-left: 40px !important;
}
.group_li li:hover {
  background: #3e8ef7;
  color: #fff;
}
.person_list li {
  line-height: 32px;
  padding-left: 40px;
}
.person_list li:hover {
  background: #3e8ef7;
  color: #fff;
}
.list_con {
  width: 100%;
}
</style>